<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="fn">销毁</button>
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let timerId=null;
        // 3个阶段 挂载（4个钩子函数） 更新（2个） 销毁（2个）
        // 根组件
        new Vue({
            // 阶段一：挂载阶段
            beforeCreate() {
                console.log('1 beforeCreate');
                console.log(this.msg);//undefined 数据没有准备好
                console.log(this.fn);//undefined 方法也没有准备好 
                console.log(this.$el);//undefined 视图也没有准备好
            },
            //在这个阶段我们可以操作数据和方法 我们一般在后面写项目的时候就是在这个钩子里面发送axios请求
            // 我就是要把操作DOM放在created中， this.$nextTick 
            created() {
                console.log('2 created');
                console.log(this.msg);//hello 数据准备好
                console.log(this.fn);//方法准备好 
                console.log(this.$el);//undefined 视图也没有准备好
            },
            beforeMount() {
                console.log('3 beforeMount');
                console.log(this.msg);//hello 数据准备好
                console.log(this.fn);//方法准备好 
                console.log(this.$el);// 视图找到了，但是没有和数据同步 
            },
            // 我们平时如果想涉及到操作DOM，就需要把代码写在这个里面
            //能不能在mounted中发送ajax 可以的 
            mounted() {
                console.log('4 mounted');
                console.log(this.msg);//hello 数据准备好
                console.log(this.fn);//方法准备好 
                console.log(this.$el);//视图和数据同步了
                timerId =setInterval(()=>{
                    console.log('定时器触发了');
                },500)
            },

            // ================================================ 
            //更新
            beforeUpdate() {
                console.log('5 beforeUpdate');
                console.log(this.msg);//hello 数据准备好
                console.log(this.fn);//方法准备好 
                console.log(this.$el.innerHTML);//数据是新的，但是视图是旧的，还没来得及更新
            },
            // 我们可以在这个里面拿到最新的DOM 平时我们用是$nextTick 
            updated() {
                console.log('6 updated');
                console.log(this.msg);//hello 数据准备好
                console.log(this.fn);//方法准备好 
                console.log(this.$el.innerHTML);//视图和数据又同步了
            },


            // =========================== 
            // 善后处理 平时用得比较多的地方 我们一般可以在这里面清理定时器 移除DOM绑定的事件 
            beforeDestroy() {
                console.log("1 beforeDestroy");
                clearInterval(timerId)
            },
            destroyed() {
                console.log("2 destroyed");
            },
            data() {
                return {
                    msg: 'hello'
                }
            },
            methods: {
                fn() {
                    this.$destroy()
                }
            }
        }).$mount('#app')


        // const obj = { name: 'zs' }
        // console.log(obj);
        // obj.name = 'lisi'
    </script>
</body>

</html>